<include file="public@header"/>
<style type="text/css">
    .pic-list li {
        margin-bottom: 5px;
    }
    .table th{
        text-align: center;
        vertical-align: middle!important;
    }
    .border_specs{
        border:1px solid #b4bcc2;
        width:80%;
    }
    .border_attr{
        border:1px solid #b4bcc2;
        width:50%;
        margin-bottom: 2%;
        display: inline-flex;
        margin-right: 10%;
    }
    .del_attr{
        width:30px;
        height:25px;
    }
</style>
</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li><a href="{:url('Specs/index')}">规格列表</a></li>
        <li class="active"><a href="#">规格编辑</a></li>
    </ul>
    <form action="{:url('Specs/update')}" method="post" class="form-horizontal js-ajax-form margin-top-20">
        <div class="row">
            <div class="col-md-9">
                <table class="table table-bordered">
                    <tr>
                        <th width="150">商品分类<span class="form-required">*</span></th>
                        <td>
                            <input type="hidden" name="id" value="{$post.id}">
                            <input type="hidden" name="shop_id" value="{$post.id}">
                            <select class="form-control" name="shop_id" style="width:200px;" disabled="disabled">
                                <foreach name="shop_category" item="vo" key="key">
                                    <option value="{$key}" <eq name="$key" value="$post.id">selected</eq>>{$vo}</option>
                                </foreach>
                            </select>
                        </td>
                    </tr>
                    <!--移除规格组名称ids-->
                    <input type="hidden" name="del_specs_ids" id="del_specs_ids">
                    <!--移除规格参数ids-->
                    <input type="hidden" name="del_attr_ids" id="del_attr_ids">

                    <tr>
                        <th>规格组<span class="form-required">*</span></th>
                        <td>
                            <a class="btn btn-default" id="add">添加规格组</a>
                        </td>
                    </tr>
                    <tr>
                        <th></th>
                        <td><span style="color:red;">注：规格组最多三组</span></td>
                    </tr>
                    <tr>
                        <table class="table table-hover table-bordered table-list" id="append">
                            <tr bgcolor="#f8f9fa">
                                <th>规格组名称</th>
                                <th>规格项</th>
                                <th style="width:40%;">添加参数</th>
                                <th>操作</th>
                            </tr>
                            <volist name="$post.specs" id="vo">
                                <tr align="center" class="{$vo.id}">
                                    <td>
                                        <input type="hidden" name="specs_ids[{$vo.id}]" value="{$vo.id}">
                                        <input type="text" class="form-control border_specs" required name="specs_name[{$vo.id}]" value="{$vo.specs_name}">
                                    </td>

                                    <td>
                                        <a class="btn btn-default add_attr">添加</a>
                                    </td>

                                    <td>
                                        <volist name="$vo.attr_many" id="voo">
                                            <div class="attr_name">
                                                <input type="hidden" name="attr_ids[{$vo.id}][]" value="{$voo.id}">
                                                <input type="text" class="form-control border_attr" required name="attr_name[{$vo.id}][]" value="{$voo.attr_name}">
                                                <a class="form-control btn btn-danger btn-sm glyphicon glyphicon-remove del_attr"></a>
                                            </div>
                                        </volist>
                                    </td>
                                    <td>
                                        <a class="btn btn-danger del">移除</a>
                                    </td>
                                </tr>
                            </volist>
                        </table>
                    </tr>
                </table>
                <div class="form-group" style="margin-top:50px;">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary js-ajax-submit">{:lang('SAVE')}</button>
                        <a class="btn btn-default" href="{:url('Specs/index')}">{:lang('BACK')}</a>
                    </div>
                </div>

            </div>

        </div>
    </form>
</div>
<script type="text/javascript" src="__STATIC__/js/admin.js"></script>
<script type="text/javascript">
    //编辑器路径定义
    var editorURL = GV.WEB_ROOT;
</script>
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript">
    $(function () {

        editorcontent = new baidu.editor.ui.Editor();
        editorcontent.render('content');
        try {
            editorcontent.sync();
        } catch (err) {
        }

        $('.btn-cancel-logo').click(function () {
            $('#logo-preview').attr('src', '__TMPL__/public/assets/images/default-thumbnail.png');
            $('#logo').val('');
        });

        //动态添加规格组
        $('#add').click(function(){
            //获取最后一个tr
            var last = $('#append').children('tbody').children('tr').last().attr('class');
            if(last == undefined){
                last = 0;
            }else{
                last = Number(last)+1;
            }
            var html = '';
            html += '<tr align="center" class="'+last+'">';
            html += '<td>';
            html +='<input type="text" class="form-control border_specs" required name="specs_name['+last+']">';
            html +='</td>';

            html +='<td>';
            html +='<a class="btn btn-default add_attr">添加</a>';
            html +='</td>';

            html +='<td>';
            html += '</td>';

            html += '<td>';
            html += '<a class="btn btn-danger del">移除</a>';
            html += '</td>';
            html += '</tr>';
            $('#append tbody').append(html);
        });

        //动态添加参数
        $(document).on('click','.add_attr',function(){
            //获取当前所在列索引
            var this_index = $(this).parents('tr').attr('class');
            var html = '';
            html+='<div class="attr_name">';
                html +='<input type="text" class="form-control border_attr" required name="attr_name['+this_index+'][]">';
                html +='<a class="form-control btn btn-danger btn-sm glyphicon glyphicon-remove del_attr" style="margin-left:1%;"></a>';
            html+='</div>';
            $(this).parent('td').next('td').append(html);
        });
        //动态移除参数
        $(document).on('click','.del_attr',function(){
            //获取当前移除的attr_id
            var attr_id = $(this).siblings('input:hidden').val();
            //获取del_attr_ids的值
            var attr_ids = $('#del_attr_ids').val();
            if(attr_ids != ''){
                attr_ids = attr_ids.split(',')
            }else{
                attr_ids = [];
            }
            if(attr_id != undefined){
                //更新del_attr_ids
                attr_ids.push(attr_id);
                $('#del_attr_ids').val(attr_ids);
            }
            $(this).parent('.attr_name').remove();
        });
        //移除规格组
        $(document).on('click','.del',function(){
            //获取当前规格组specs_id
            var specs_id = $(this).parent('td').parent('tr').children('td').eq(0).children('input:hidden').val();
            //获取del_specs_ids的值
            var specs_ids = $('#del_specs_ids').val();
            if(specs_ids != ''){
                specs_ids = specs_ids.split(',')
            }else{
                specs_ids = [];
            }
            if(specs_id != undefined){
                //更新del_specs_ids
                specs_ids.push(specs_id);
                $('#del_specs_ids').val(specs_ids);
            }
            $(this).parent('td').parent('tr').remove();
        });
    });
</script>
</body>
</html>
